<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <!--模板-->
    <div id="app">
        {{msg}}
        <br/>
    </div>
</body>
<!--通过src引入vue之后 全局就会多一个Vue构造函数-->
<script src="./js/vue.js"></script>
<script>
    // 配置
    var vm = new Vue({
        el:"#app",
        data:{
            // 所有需要渲染到界面上的数据 都得经过data的处理
            // data中的所有数据都会转绑给vm实例对象(数据代理)
            // data里的数据是响应式的!!! 当data中的数据产生变化时 对应的界面会自动更新
           msg:"hello Vue"   //申明式编程
        }
    })

    //msg2 肯定不是一个需要渲染到界面上的数据
    vm.msg2 = "hello Vue 2"

    setTimeout(()=>{
        // vm.msg = "hello Vue 666"
        vm.msg2 = "hello Vue 222"
    },2000)
</script>
</html>